<template>
	<view :class="isprohibit?'isprohibit':''">
		<view class="navbar" :style="{background:isstip?'#ffffff':''}">
			<zbar></zbar>
			<view class="navbarcontent">
				<uni-icons class="ricon" @click="goback" type="left" size="24"
					:color="isstip?'#000':'#fff'"></uni-icons>
				<view class="title" v-show="isstip">
					商品详情
				</view>
			</view>
		</view>
		<view class="swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000">
				<swiper-item v-for="(item,index) in product.img" :key="index">
					<view class="swiper-item">
						<image :src="item" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="content">
			<view class="titflex" @click="pagegoshop">
				<view class="title">
					{{shop.shopName}}--{{product.productName}}
				</view>
				<image class="rig" src="/static/icon/r.png" mode=""></image>
			</view>
			<view class="fx">
				<view class="DINB">
					<span class="ic">￥</span>{{product.price}}
					<span style="margin-left: 30rpx;" class="FINE">￥{{product.priceOldBegin}}-{{product.priceOldEnd}}
					</span>
				</view>
				<view class="right">
					<image src="/static/icon/fx.png" mode=""></image>
					<button open-type="share"></button>
				</view>
			</view>

			<view class="tipflex" style="margin-top: 20rpx;">
				<view class="" v-if="product.count!=0 && product.status =='UP'">
					<view class="tip" v-if="product.count<=5">
						仅剩{{product.count}}份
					</view>
					<view class="tip" v-else>剩5份+</view>
				</view>
				<view class="tipflex">
					<view class="its" v-for="(item,index) in product.category" :key="index">{{item}}</view>
				</view>
			</view>

			<view class="flex1">
				<view class="">
					取餐时间：{{product.takeTimeBegin?product.takeTimeBegin.substring(0,5):''}}-{{product.takeTimeEnd?product.takeTimeEnd.substring(0,5):''}}
				</view>
				<image @click="opents" src="/static/icon/ts.png" mode=""></image>
			</view>

			<view class="address">
				<view class="" style="flex: 1;">
					<view class="">
						{{shop.address}}
					</view>
					<view v-if="distance" class="" style="color: #29A85C;">
						距离您{{distance}}
					</view>
				</view>
				<view class="right">
					<image src="/static/icon/dh.png" mode="" @click="$opennavigation(shop)"></image>
					<image src="/static/icon/sj.png" mode="" @click="$phoneCall(shop.shopPhone)"></image>
				</view>
			</view>
			<view class="tsimg">
				<image src="/static/js.png" mode=""></image>
				<view class="test">
					累计为地球减少 <span>{{product.c | smartWeight}}</span> 碳排放
				</view>
			</view>
			<view class="detail">
				<view class="detail_tit">
					商品详情
					<image v-if="isopen" @click="isopen=!isopen" src="/static/icon/jian.png" mode=""></image>
					<image v-else @click="isopen=!isopen" src="/static/icon/jia.png" mode=""></image>
				</view>
				<view class="tt">
					注意：口味及款式视门店销售情况而定，不支持挑选哦~
				</view>

				<view class="texts" v-if="isopen">
					<view class="texts_h">
						{{product.info}}
					</view>
					<view class="col">
						伊可库旨在倡导珍惜每一粒粮食，实现要浪费、环保绿色的低碳生活~
					</view>
				</view>
			</view>
			<view class="k343">
				<view class="">
					<view class="kflexl">
						<view class="kflexl">
							<image src="/static/icon/ql.png" mode=""></image>
							<view class="">
								福利群
							</view>
						</view>
						<view class="lyh">
							领优惠
						</view>
					</view>
					<view class="test">
						长按识别加入，领取优惠
					</view>
				</view>
				<view class="rimg">
					<image show-menu-by-longpress :src="imgInfo.kfCode" mode=""></image>
				</view>
			</view>
			<view class="pingl">
				<view class="tit" v-if="commentList.length != 0">
					<view class="">
						用户评价({{product.replyCount}})
					</view>
					<view class="tit_r" @click="pageComment">
						<view class="">
							查看更多
						</view>
						<uni-icons type="right" color="#000" size="14"></uni-icons>
					</view>
				</view>
				<view class="">
					<view class="tipflex">
						<view class="ites" v-for="(i,idx) in tagList" :key="idx">
							{{idx}} ({{i}})
						</view>
					</view>
					<view class="plist">
						<view class="items" v-for="(item,index) in commentList" :key="index" @click="pagePer(item)">
							<view class="items_user">
								<view class="user_flex">
									<image class="uimg" :src="item.userHead?item.userHead:'/static/toux.png'"
										mode="aspectFit"></image>
									<view class="uname">
										{{item.userName}}
									</view>
								</view>
								<view class="time">{{item.createTime}}</view>
							</view>
							<view class="star">
								<uni-rate readonly="true" :value="item.rating" size='19' activeColor="#000"></uni-rate>
							</view>
							<view class="text">{{item.content}}</view>
							<view class="pimglist" v-if="item.img">
								<image @click.stop="$previewImage(item.img,ind)" v-for="(img,ind) in item.img"
									:key="ind" :src="img" mode="scaleToFill"></image>
							</view>
							<view class="shop">
								{{item.productName}}({{item.productCount}}份)
								<span>￥{{item.productPrice}}</span><span class="s2">￥{{item.productPriceOld}}</span>
							</view>
							<view class="imgflex">
								<view class="tipflexs">
									<view class="ites" v-for="(tag,ind) in item.tag" :key="ind">
										{{tag}}
									</view>
								</view>
								<view class="img_r">
									<view class="r">
										<span>{{item.replyCount}}</span>
										<uni-icons size="20" color='#D9D9D9' type="chat"></uni-icons>
									</view>
									<view class="r" @click.stop="handleDZ(item,index)">
										<span>{{item.likeCount}}</span>
										<uni-icons v-if="item.likeFlag" size="20" color='#000000'
											type="hand-up-filled"></uni-icons>
										<uni-icons v-else size="20" color='#D9D9D9' type="hand-up"></uni-icons>
									</view>
								</view>
							</view>
							<view class="dialog" v-if="item.replyList!=0">
								<view class="itemss" v-for="(reply,index) in item.replyList" :key="index">
									<view class="items_users">
										<view class="items_conts">
											<view class="user_flexs">
												<image class="uimg"
													:src="reply.sendUserHead?reply.sendUserHead:'/static/toux.png'"
													mode=""></image>
												<view class="uname">{{reply.sendUserName}}</view>
												<view class="tipss" v-if="reply.sendUserShop == 1">
													店铺
												</view>
												<view class="tipss1" v-if="reply.sendUserShop == 2">
													平台
												</view>
											</view>
											<view class="cont" v-if="reply.reply==1">
												<view class="hf">
													回复
												</view>
												<span>{{reply.receiveUserName}}</span>
											</view>
										</view>
										<view class="time">{{reply.createTime}}</view>
									</view>
									<view class="contxt">
										{{reply.content}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="kong" v-if="commentList.length == 0">
					<image src="/static/kpj.png" mode=""></image>
					<view class="">
						尚无评价
					</view>
				</view>
			</view>

		</view>
		<view class="plflex" @click="pageComment" v-if="commentList.length >=3">
			<view class="pl">
				<view class="">
					查看全部评论
				</view>
				<uni-icons style="display: block;" type="right" color="#036029"></uni-icons>
			</view>
		</view>
		<view class="" style="height: 140rpx;padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);  ">
		</view>
		<view class="footer">
			<view class="texdts" v-if="product.sellStop == 1 || product.status !='UP'">
				<span v-if="product.status !='UP'">商品未上架 ，订阅开售提醒</span>
				<span v-else-if="product.sellStop == 1">商品已售罄 ，订阅开售提醒</span>
			</view>
			<view class="cont">
				<image src="/static/b.png" mode=""></image>
				<view class="" style="display: flex;align-items: center;">
					<view class="ig"></view>
					<view class="DINB">
						<span class="ic">￥</span> {{product.price}} <span
							class="FINE">￥{{product.priceOldBegin}}-{{product.priceOldEnd}}</span>
					</view>
				</view>

				<view @click.stop="test(product)" class="btn" :class="product.subscribe?'b1':'b2'" v-if="product.sellStop == 1 || product.status !='UP'
				">
					{{product.subscribe?'已订阅':'开售提醒'}}
				</view>
				<view v-if="product.sellStop == 0 && product.status =='UP'" class="btn" @click="pagePaymentorder">
					立即下单
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" :safe-area="false" @change='popchange'>
			<view class="popup">
				<image class="abs" src="/static/b.png" mode=""></image>
				<view class="cont">
					<image :src="product.img[0]" mode="aspectFill"></image>
					<view class="rig">
						<view class="tit">
							{{shop.shopName}}--{{product.productName}}
						</view>
						<view class="flex_sp">
							<view class="flex_b">
								<view class="its" v-for="(item,index) in product.category" :key="index">{{item}}</view>
							</view>
							<view class="btnflex">
								<view :class="num>1?'actbtn':''" class="btn" @click="numclick('min')">
									-
								</view>
								<view class="input">
									{{num}}
								</view>
								<view :class="product.count ==num?'':'actbtn'" class="btn" @click="numclick('add')">
									+
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="btn_flex">
					<view class="flex_b">
						合计：<view class="DINB">
							<span class="ic">￥</span>{{allprice}}
							<span style="margin-left: 16rpx;"
								class="FINE">￥{{product.priceOldBegin}}-{{product.priceOldEnd}} </span>
						</view>
					</view>
					<view class="btns" @click="handlePorder">
						立即下单
					</view>
				</view>
			</view>
		</uni-popup>
		<clearts ref="popupts"></clearts>
	</view>
</template>

<script>
	import {
		productInfo,
		commentOrderList,
		commenttag,
		commentLike,
		getimg,
		postSubscribe
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				isprohibit: false, //弹窗打开禁止滚动
				isstip: false, //头部切换
				isopen: false, //详情展开关闭

				productid: '',
				type: 0,
				product: {},
				shop: {},
				distance: '',
				num: 1,


				params: {
					shopId: '', //店铺ID
					productId: '', //商品ID
					tag: '', //标签
					img: '', //有图：1
					order: '', //最新：1
				},
				tagList: [], //评价标签
				commentList: [], //评论列表
				nolist: false,

				imgInfo: {}
			};
		},
		computed: {
			allprice() {
				return (this.product.price * this.num).toFixed(2)
			}
		},
		onLoad(option) {
			getimg({}).then(res => {
				this.imgInfo = res.data
			})
			this.distance = option.distance
			this.type = option.type
			this.productid = option.productid
			this.params.productId = option.productid
		},
		onShow() {
			this.getinfo()
		},
		onShareAppMessage(res) {
			return {
				title: '推荐下单',
				path: `/mainpage/details?productid=${this.productid}&&type=1`,
			}
		},
		onShareTimeline(res) {
			return {
				title: '推荐下单',
				path: `/mainpage/details?productid=${this.productid}&&type=1`,
			}
		},
		methods: {
			//测试订阅
			test(item) {
				console.log(item, '---');
				if (uni.getStorageSync('userToken')) {
					uni.requestSubscribeMessage({
						tmplIds: ['8hP2pKBuGmGpqm-1dABYVNPLf-k31G4wol-dUi_gH1M'], // 这里填写你的模板ID数组
						success(res) {
							console.log(res);
							if (res['8hP2pKBuGmGpqm-1dABYVNPLf-k31G4wol-dUi_gH1M'] === 'accept') {
								// 用户同意订阅该模板
								console.log('用户同意订阅TEMPLATE_ID_1');
			
								uni.login({
									provider: 'weixin',
									success: function(loginRes) {
										let obj = {
											code: loginRes.code,
											templateId: '8hP2pKBuGmGpqm-1dABYVNPLf-k31G4wol-dUi_gH1M',
											productId: item.id,
										}
										postSubscribe(obj).then(res => {
											if (res.code == 200) {
												item.subscribe = true
													uni.showToast({
														title:'商品已订阅',
														icon:'none'
													})
											}
										})
									}
								});
			
			
			
							}
							if (res['TEMPLATE_ID_2'] === 'reject') {
								// 用户拒绝订阅该模板
								console.log('用户拒绝订阅TEMPLATE_ID_2');
							}
						},
						fail(err) {
							console.error('订阅消息失败', err);
						}
					});
			
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
			
			},
			getinfo() {
				productInfo({
					id: this.productid
				}).then(res => {
					res.data.product.img = res.data.product.img.split(',')
					res.data.product.category = res.data.product.category.split(',')
					this.product = res.data.product
					if(res.data.product.del == '1'){
						uni.redirectTo({
							url: `/mainpage/shopdetail?id=${res.data.shop.id}`
						})
					}
					this.shop = res.data.shop
					this.params.shopId = res.data.shop.id
					commenttag(this.params).then(res => {
						this.tagList = res.data
					})
					commentOrderList(this.params).then(res => {
						res.rows.forEach(item => {
							item.img = item.img?.split(',')
							item.tag = item.tag?.split(',')
						})
						this.commentList = res.rows.slice(0, 3)
					})
				})
			},
			//点赞
			handleDZ(item) {
				item.likeFlag = !item.likeFlag
				commentLike({
					id: item.id
				}).then(res => {
					if (res.code == 200) {
						this.getinfo()
					}
				})
			},
			//跳转下单
			handlePorder() {
				if (uni.getStorageSync('userToken')) {
					let obj = {
						productid: this.productid,
						num: this.num,
						distance: this.distance
					}
					uni.navigateTo({
						url: `/mainpage/paymentorder?obj=` + encodeURIComponent(JSON.stringify(obj))
					})
					setTimeout(() => {
						this.$refs.popup.close()
					}, 1000)
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			
			},
			//跳转店铺
			pagegoshop() {
				uni.navigateTo({
					url: `/mainpage/shopdetail?id=${this.shop.id}`
				})
			},
			//左上跳转
			goback() {
				if (this.type == 1) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					uni.navigateBack()
				}
			},
			//点击下单打开弹窗
			pagePaymentorder() {
				if (uni.getStorageSync('userToken')) {
					this.$refs.popup.open()
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			popchange(e) {
				this.isprohibit = e.show
			},
			//点击加减
			numclick(type) {
				if (type == 'add') {
					if (this.product.count == this.num) {
						return
					}
					this.num++
				} else if (type == 'min') {
					if (this.num == 1) {
						return
					}
					this.num--
				}
			},
			//查看全部评价
			pageComment() {
				uni.setStorageSync('obj', this.params)
				uni.navigateTo({
					url: `/mainpage/comment?obj=` + encodeURIComponent(JSON.stringify(this.params))
				})
			},
			//跳转某一条评论
			pagePer(item) {
				console.log(item);
				uni.navigateTo({
					url: `/mainpage/perComment?id=${item.id}`
				})
			},
			// 页面滚动时触发的生命周期函数  
			onPageScroll: function(e) {
				if (e.scrollTop > 250) {
					this.isstip = true
				} else {
					this.isstip = false
				}
			},
			opents() {
				this.$refs.popupts.open()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #FBFBFB;
	}

	.plflex {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;

		.pl {
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #036029;
			display: flex;
		}
	}


	.k343 {
		width: 710rpx;
		margin: 20rpx auto;
		padding: 24rpx 0rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 20rpx solid #FBFBFB;
		border-top: 20rpx solid #FBFBFB;

		.kflexl {
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #000000;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 6rpx;
			}

			.lyh {
				width: 65rpx;
				height: 24rpx;
				background: linear-gradient(270deg, #E2650F 0%, #FEDBC3 100%);
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 18rpx;
				color: #ffffff;
				text-align: center;
				line-height: 24rpx;
				margin-left: 20rpx;
				position: relative;
			}

			.lyh:before {
				content: '';
				position: absolute;
				width: 0;
				height: 0;
				left: -24rpx;
				border-left: 12rpx solid transparent;
				border-right: 12rpx solid #FEDBC3;
				border-top: 12rpx solid transparent;
				border-bottom: 12rpx solid transparent;

			}
		}

		.test {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #000000;
			margin-top: 10rpx;
		}

		.rimg {
			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}

	.navbar {
		position: fixed;
		width: 100%;
		top: 0;
		padding: 0rpx 10px;
		box-sizing: border-box;
		z-index: 9;

		.navbarcontent {
			position: relative;
			height: 44px;
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;

			.ricon {
				position: absolute;
			}

			.title {
				flex: 1;
				/* #ifdef APP-PLUS */
				font-size: 34rpx;
				/* #endif */
				/* #ifndef APP-PLUS */
				font-size: 17px;
				/* #endif */
				text-align: center;
			}

		}
	}

	.swiper {
		swiper {
			width: 100%;
			height: 520rpx;
		}

		.swiper-item {
			width: 100%;
			height: 520rpx;

			image {
				width: 100%;
				height: 520rpx;
			}
		}
	}


	/* #ifdef MP-WEIXIN */
	// 默认指示点样式
	wx-swiper .wx-swiper-dot {
		position: relative;
		background-color: #eeeeee;
		width: 10rpx;
		border-radius: 5rpx;
		height: 8rpx;
	}

	// 当前选中样式
	wx-swiper .wx-swiper-dot-active {
		background-color: #ffffff !important;
		width: 40rpx;
		border-radius: 10rpx;
	}

	/* #endif */

	.content {
		width: 100%;
		padding: 32rpx 20rpx 1rpx 20rpx;
		box-sizing: border-box;
		background-color: #ffffff;

		.titflex {
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
			color: #000000;
			flex: 1;
		}

		.fx {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;

			.right {
				width: 50rpx;
				height: 50rpx;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}

			button {
				width: 50rpx;
				height: 50rpx;
				opacity: 0;
				position: absolute;
				top: 0%;
			}
		}

		.tipflex {
			display: flex;
			align-items: center;

			.tip {
				height: 44rpx;
				background: #29A85C;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				padding: 0 10rpx;
				line-height: 44rpx;
				margin-right: 16rpx;
			}

			.its {
				height: 44rpx;
				background: #F6F6F6;
				border-radius: 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #7B7B7B;
				line-height: 44rpx;
				padding: 0rpx 16rpx;
				margin-right: 10rpx;
			}
		}

		.flex1 {
			display: flex;
			align-items: center;
			height: 68rpx;
			background: #F3F3F3;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #000000;
			justify-content: space-between;
			padding: 0rpx 20rpx;
			box-sizing: border-box;
			margin: 20rpx auto;

			image {
				width: 32rpx;
				height: 33rpx;
			}
		}

		.address {
			background: #F3F3F3;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #000000;
			padding: 15rpx 20rpx;
			box-sizing: border-box;
			margin: 20rpx auto;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.right {
				image {
					width: 32rpx;
					height: 33rpx;
					margin-left: 30rpx;
				}
			}
		}

		.tsimg {
			width: 710rpx;
			height: 120rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 710rpx;
				height: 120rpx;
			}

			.test {
				position: absolute;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				margin-top: 20rpx;

				span {
					font-family: 'DINB';
					font-size: 40rpx;
					margin: 0 10rpx;
				}
			}
		}

		.detail {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #000000;
			border-top: 1px solid #FBFBFB;
			margin: 20rpx auto;
			padding: 26rpx 0rpx;

			.detail_tit {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #000000;

				image {
					width: 28rpx;
					height: 28rpx;
				}
			}

			.tt {
				margin-top: 24rpx;
			}

			.texts {
				margin-top: 30rpx;
				line-height: 38rpx;

				.texts_h {
					white-space: pre-wrap;
				}

				.col {
					color: #29A85C;
					margin-top: 20rpx;
				}
			}
		}



		.pingl {
			width: 710rpx;

			.tit {
				margin-top: 8rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #000000;
			}

			.tit_r {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				font-weight: 500;
			}

			.tipflex {
				display: flex;
				margin: 28rpx auto 0rpx;
				flex-wrap: wrap;

				.ites {
					height: 48rpx;
					background: #036029;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					padding: 0rpx 14rpx;
					text-align: center;
					line-height: 48rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					margin-right: 10rpx;
					margin-bottom: 10rpx;
				}
			}

			.kong {
				margin: 100rpx auto;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #000000;

				image {
					width: 228rpx;
					height: 228rpx;
				}
			}
		}

		.plist {
			width: 100%;
			font-family: PingFang SC, PingFang SC;

			.items {
				border-top: 1px solid #D1CDCD;
				margin-top: 30rpx;

				.items_user {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 30rpx;

					.user_flex {
						display: flex;
						align-items: center;

						.uimg {
							width: 50rpx;
							height: 50rpx;
							border-radius: 25rpx;
						}

						.uname {
							font-weight: bold;
							font-size: 32rpx;
							color: #000000;
							margin-left: 10rpx;
						}
					}

					.time {
						font-size: 24rpx;
						color: #979797;
					}
				}

				.star {
					margin: 14rpx auto;
				}

				.text {
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					word-break: break-all;
					margin-bottom: 20rpx;
				}

				.pimglist {
					display: flex;
					justify-content: space-between;

					image {
						width: 230rpx;
						height: 210rpx;
						border-radius: 10rpx;
					}
				}

				.shop {
					height: 68rpx;
					background: #F3F3F3;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #000000;
					padding: 0rpx 20rpx;
					line-height: 68rpx;
					box-sizing: border-box;
					display: inline-block;
					margin-top: 20rpx;

					span {
						font-family: 'DINB';
					}

					.s2 {
						color: #D1CDCD;
						font-size: 22rpx;
						text-decoration-line: line-through;
						margin-left: 6rpx;
					}
				}

				.imgflex {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 30rpx auto;

					.tipflexs {
						flex: 1;
						display: flex;

						.ites {
							height: 48rpx;
							background: #036029;
							border-radius: 0rpx 0rpx 0rpx 0rpx;
							padding: 0rpx 14rpx;
							text-align: center;
							line-height: 48rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
							margin-right: 10rpx;
						}
					}

					.img_r {
						display: flex;
						align-items: center;

						.r {
							display: flex;
							margin-left: 20rpx;
							align-items: center;
						}

						span {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #D1CDCD;
						}
					}
				}

				.dialog {
					background: #FAF9F7;
					border-radius: 6rpx;
					padding: 22rpx 24rpx;

					.itemss {
						margin-bottom: 24rpx;

						.items_users {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.items_conts {
								display: flex;
								align-items: center;

								.cont {
									display: flex;
									align-items: center;
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									font-size: 28rpx;
									color: #000000;

									.hf {
										color: #CE7034;
										margin: 0 10rpx;
									}
								}
							}

							.user_flexs {
								display: flex;
								align-items: center;

								.uimg {
									width: 40rpx;
									height: 40rpx;
									border-radius: 25rpx;
								}

								.uname {
									font-size: 28rpx;
									color: #000000;
									margin-left: 10rpx;
								}

								.tipss {
									width: 80rpx;
									background: #000000;
									border-radius: 0rpx 0rpx 0rpx 0rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									font-size: 24rpx;
									color: #FFFFFF;
									line-height: 36rpx;
									text-align: center;
									margin-left: 10rpx;
								}

								.tipss1 {
									width: 80rpx;
									background: #036029;
									border-radius: 0rpx 0rpx 0rpx 0rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									font-size: 24rpx;
									line-height: 36rpx;
									color: #FFFFFF;
									text-align: center;
									margin-left: 10rpx;
								}
							}

							.time {
								font-size: 24rpx;
								color: #979797;
							}
						}

						.contxt {
							margin-top: 20rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #666666;
						}
					}

					.itemss:last-child {
						margin-bottom: 0rpx;
					}

				}
			}

			.items:first-child {
				border-top: none;
				margin-top: 0rpx;
			}
		}
	}

	.footer {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 7rpx 0rpx rgba(210, 185, 178, 0.38);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.texdts {
			width: 100%;
			height: 80rpx;
			background: rgba(0, 0, 0, 0.5);
			position: absolute;
			top: -80rpx;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 80rpx;
		}

		image {
			width: 120rpx;
			height: 128rpx;
			position: absolute;
			top: -30rpx;
		}

		.cont {
			display: flex;
			justify-content: space-between;
			padding: 10rpx 20rpx;
			height: 120rpx;
			align-items: center;

			.DINB {
				margin-left: 20rpx;
			}

			.ig {
				width: 120rpx;
				height: 128rpx;
			}

			.btn {
				width: 240rpx;
				height: 92rpx;
				background: #000000;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 92rpx;
				text-align: center;
			}
			.b1 {
				background: #CE7034;
			}
			
			.b2 {
				background: #29A85C;
			}
		}
	}

	.popup {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 120rpx 20rpx 0rpx;
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.abs {
			width: 140rpx;
			height: 148rpx;
			position: absolute;
			top: -80rpx;
			left: 20rpx;
		}

		.cont {
			display: flex;
			align-items: center;
			padding-bottom: 46rpx;
			border-bottom: 1px solid #eee;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 8rpx;
			}

			.rig {
				flex: 1;
				margin-left: 20rpx;

				.tit {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #000000;
				}

				.its {
					height: 44rpx;
					background: #F6F6F6;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #7B7B7B;
					padding: 0rpx 12rpx;
					line-height: 44rpx;
					text-align: center;
					margin-right: 10rpx;
				}

				.flex_sp {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 16rpx;

					.btnflex {
						display: flex;
						width: 160rpx;

						.input {
							width: 60rpx;
							text-align: center;
							font-size: 28rpx;
							line-height: 44rpx;
							font-family: 'DINB';
						}

						.btn {
							width: 44rpx;
							height: 44rpx;
							background: #F3F3F3;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							border: 1rpx solid #D1D1D6;
							text-align: center;
							line-height: 40rpx;
							font-size: 40rpx;
							color: #D1D1D6;
						}

						.actbtn {
							background: #000000;
							color: #ffffff;
						}
					}
				}
			}
		}

		.btn_flex {
			margin-top: 15rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;

			.btns {
				width: 240rpx;
				height: 92rpx;
				background: #000000;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 92rpx;
			}
		}
	}
</style>